import { InfiniteScroll, NavBar } from 'antd-mobile'
import React, { useEffect, useState } from 'react'
import { useLocation } from 'react-router-dom'
import { useNavigate } from 'react-router-dom'
import utils from '../../utils/index'
const List = () => {
    const navigate = useNavigate()
    const [list, setList] = useState([])
    const [page, setPage] = useState(1)
    const { state } = useLocation()
    const { start, end } = state
    console.log(start, end);

    const getData = async () => {
        const resp = await utils.post('/trip/train', { start, end, page })
        console.log(resp.data.data);
        setList([...list, ...resp.data.data])
        setPage(page + 1)
    }
    useEffect(() => {
        getData()
    }, [])

    const getDeail = (v) => {
        navigate("/deail", { state: v })
    }
    return (
        <div>
            列表
            <NavBar onBack={() => navigate(-1)}>{state.start}——{state.end}</NavBar>
            <div>
                {
                    list.map((v, i) => {
                        return <dl key={i} style={{
                            display: 'flex',
                            justifyContent: 'space-between',
                            padding: '10px',
                        }}
                            onClick={() => getDeail(v)}
                        >
                            <dt>{v.start}-{v.end}</dt>
                            <dd>
                                <div>是否高铁:{v.isSeat ? '非高铁' : '高铁'}</div>
                                <div>是否有票:{v.isSpeed ? '无票' : '有票'}</div>
                            </dd>
                            <dd>
                                <div>
                                    <div>商务座:{v.tick.vip}</div>
                                    <div>一等座:{v.tick.firstTick}</div>
                                    <div>二等座:{v.tick.secondTick}</div>
                                </div>
                            </dd>
                        </dl>
                    })
                }
            </div>
            <InfiniteScroll loadMore={getData} hasMore={true} />
        </div>
    )
}

export default List
